<script lang="ts" setup>
import FlUpload from '@fl/components/fl-upload.vue'
import { addActivityEvent, getActivityDetail, getBuildList, getProjectList, loadBuildingContact, updateActivityEvent } from '@fl/api/anjutong/seckill-manage'
import Table from './Table.vue'
import { orderBy, uniq, uniqBy } from 'lodash-es'

const router = useRouter()
const houseList = ref([])
const defaultProps = {
    children: 'children',
    label: 'label',
    disabled: 'disabled',
}

const projectList = ref([])
const houseForm = reactive({
    projectId: '',
    projectName: '',
})

const rules = reactive({
    eventName: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 1, max: 20, message: '长度不超过20字', trigger: 'blur' },
    ],
    remark: [
        { required: true, message: '请输入活动描述', trigger: 'blur' },
        { min: 1, max: 50, message: '长度不超过20字', trigger: 'blur' },
    ],
    activeTime: [
        { required: true, message: '请选择活动时间', trigger: 'change' },
    ],
    description: [
        { required: false, message: '请输入活动说明', trigger: 'blur' },
        { min: 1, max: 1000, message: '长度不超过20字', trigger: 'blur' },
    ],
    backgroundImage: [
        { required: true, message: '请上传活动背景图', trigger: 'change' },
    ],
    styleType: [
        { required: true, message: '请选择活动样式', trigger: 'change' },
    ],
    refundHour: [
        { required: true, message: '请选择活动样式', trigger: 'change' },
    ],
    payTimeoutMinute: [
        { required: true, message: '请输入秒杀资格金退款时长', trigger: 'blur' },
    ],
    depositAmount: [
        { required: true, message: '请输入秒杀资格金', trigger: 'blur' },
    ],

})
const route = useRoute()
onMounted(() => {
    const { id, type } = route.query
    if (type == 'edit' || type == 'copy') {
        getActivityDetail({ id }).then((res) => {
            if (res.code === 200) {
                const activityEvent = res.data.activityEvent
                if (type == 'edit') {
                    form.id = activityEvent.id
                    form.activityId = activityEvent.id
                }
                else {
                    form.id = ''
                    form.activityId = ''
                }
                form.eventName = activityEvent.eventName
                form.remark = activityEvent.remark
                form.startTime = activityEvent.startTime
                form.endTime = activityEvent.endTime
                form.description = activityEvent.description
                form.backgroundImage = activityEvent.backgroundImage
                form.styleImage = activityEvent.styleImage
                form.styleType = activityEvent.styleType
                form.depositAmount = activityEvent.depositAmount
                form.refundHour = activityEvent.refundHour
                form.payTimeoutMinute = activityEvent.payTimeoutMinute
                form.contractJson = activityEvent.contactJson
                form.activeTime = [form.startTime, form.endTime]
                form.houseDataList = res.data.details
                form.houseDataList = uniqBy(form.houseDataList, 'houseId')
                form.houseDataList = orderBy(form.houseDataList, ['sort'], 'asc')

                if (form.contractJson) {
                    contractPersonList.value = JSON.parse(form.contractJson)
                }

                contractPersonList.value.map((personItem) => {
                    if (personItem) {
                        personItem.consultantList = JSON.parse(personItem.consultantJson)
                        return personItem
                    }
                })
                contractPersonList.value = contractPersonList.value.filter((person) => {
                    return person != null
                })
                contractPersonList.value = uniqBy(contractPersonList.value, 'projectBaseId')
            }
        })
    }
    else {
        form.styleImage = styleList.value[0].url
        form.styleType = 1
    }
})

const treeData = ref([])

const contractPersonList = ref([])

const formRules = ref([])
const choseHouseDialog = ref(false)
const choseHouseFooter = ref(true)
const publishList = ref(null)
const tableActive = ref('')
const tabTable = ref([])

const houseIds = ref([])
const defalutTree = ref([])

function fatherVisibleFooetrChange() {

}

const houseInfoList = ref([])
function changeStyle(index) {
    form.styleImage = styleList.value[index - 1].url
}

const houseNum = computed(() => {
    let number = 0
    if (publishList.value) {
        publishList.value.forEach((item) => {
            const arrlist = item.quanblclist.filter(v => !item.louceng.includes(v))
            number += arrlist.length
        })
        return number // 以 count 值为基础计算 num 的值
    }
})

const houseCheckList = computed(() => {
    if (!publishList.value)
        return [] // 空值检查

    return publishList.value.flatMap(item =>
        (item.quanblclist || []).filter(v => !(item.louceng || []).includes(v)),
    )
})

function publishHouseInfo() {
    // console.log(publishList, 'publishList')
    changeProject2(houseForm.projectId)
    houseInfoList.value = publishList.value.flatMap((tab, tIndex) => {
        const tableData = tab.tableData.flatMap(item => item.houseData)
        const quanblclist = tab.quanblclist
        return tableData.filter(item => quanblclist.includes(item.id))
    })

    // console.log(houseInfoList.value, 'houseInfoList')

    if (houseInfoList.value.length > 0) {
        houseInfoList.value.forEach((item) => {
            const it = {
                houseDataId: '',
                houseId: item.id,
                projectBaseId: houseForm.projectId,
                buildingName: houseForm.projectName,
                roomNo: item.fh,
                buildingNo: item.buildingName, // buildingId
                unitNo: item.unit,
                floorNo: item.floor,
                houseType: item.hxjg, // houseTypeName,
                area: item.jzmj,
                price: item.xszj,
                isShow: 0, // 默认可售
                onePrice: '',
                sort: '',
            }
            form.houseDataList.push(it)
            form.houseDataList = uniqBy(form.houseDataList, 'houseId')
        })
        handleHouseClose()
    }
}

// function changeProject(val) {
//     const item = projectList.value.filter((it) => {
//         return val === it.id
//     })
//     houseForm.projectName = item[0].ghxmmc
//     tabTable.value = []
//     // 获取楼栋信息
//     getBuildList(item[0].id).then((res) => {
//         treeData.value = res.data
//     })

//     loadBuildingContact(item[0].id).then((result) => {
//         houseForm.projectId = item[0].id
//         const it = result.data
//         if (it.consultantJson) {
//             it.consultantList = JSON.parse(it.consultantJson)
//         }
//         else {
//             it.consultantList = [
//                 {
//                     consultantName: '',
//                     consultantPhone: '',
//                 },
//             ]
//         }
//         contractPersonList.value.push(it)
//         contractPersonList.value = uniqBy(contractPersonList.value, 'projectBaseId')
//     })
// }
function changeProject(val) {
    const item = projectList.value.filter((it) => {
        return val === it.id
    })
    houseForm.projectName = item[0].ghxmmc
    tabTable.value = []
    // 获取楼栋信息
    getBuildList(item[0].id).then((res) => {
        treeData.value = res.data
    })
}

function changeProject2(val) {
    const item = projectList.value.filter((it) => {
        return val === it.id
    })
    loadBuildingContact({ projectBaseId: item[0].id }).then((result) => {
        houseForm.projectId = item[0].id
        const it = result.data
        if (it.consultantJson) {
            it.consultantList = JSON.parse(it.consultantJson)
        }
        else {
            it.consultantList = [
                {
                    consultantName: '',
                    consultantPhone: '',
                },
            ]
        }
        contractPersonList.value.push(it)
        contractPersonList.value = uniqBy(contractPersonList.value, 'projectBaseId')
    })
}

function showChoseHouse() {
    choseHouseDialog.value = true
    houseForm.projectId = ''
    houseForm.projectName = ''
    getProjectList({
        pageNum: 1,
        pageSize: 10000,
    }).then((res) => {
        projectList.value = res.rows
    })
}

function handleHouseClose() {
    tabTable.value = []
    treeData.value = []
    houseForm.projectId = ''
    houseForm.projectName = ''
    treefirid.value = []
    choseHouseDialog.value = false
}

const saveHouseProjectIds = ref([])
const deleteHouseProjectIds = ref([])
function removeRow(row, index) {
    ElMessageBox.confirm(
        `是否确认删除此房源`,
        '系统提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
        },
    ).then(() => {
        form.houseDataList.splice(index, 1)
        form.deleteHouseDataIds.push(row.id)

        saveHouseProjectIds.value = []
        form.houseDataList.forEach((it) => {
            saveHouseProjectIds.value.push(it.projectBaseId)
        })
        saveHouseProjectIds.value = uniq(saveHouseProjectIds.value)
        if (contractPersonList.value) {
            contractPersonList.value = contractPersonList.value.filter((personItem) => {
                return saveHouseProjectIds.value.includes(personItem.projectBaseId)
            })
        }
    })
}

const plallid = ref([])
const treefirid = ref([])
function treeclickchange(val) {
    console.log(val, '点击tree树')
    if (val.type == 1) {
        setTimeout(() => {
            houseIds.value = []
            houseIds.value.push(val.id)
            // huqutreedata(props.id);
            treefirid.value = []

            // console.log(plallid.value.some((item) => item.id != val.id));
            // 获取批量数据传入的id数组
            // 批量id数组里面不包含选中的id
            if (plallid.value.every(item => item.id != val.id)) {
                plallid.value.push(val)
            }
            console.log(plallid.value, '属性组件内容值')
            // tabtable数据变化
            treefirid.value.push(val.id)
            console.log(treefirid.value, '传给数组的id')
            // 跳转tab对应的值
            tableActive.value = val.id

            // 给tab添加值内容
            // tabtable.value.push()
            // 如果tabtable里面有了就不添加，没有就添加
            const flag = tabTable.value.every(item => item.id != val.id)
            if (flag) {
                tabTable.value.push(val)
            }
            else {
                // 取消勾选处理tabtable
                tabTable.value.forEach((item, index) => {
                    if (item.id == val.id) {
                        tabTable.value.splice(index, 1)
                        if (tabTable.value.length > 0) {
                            tableActive.value = tableActive.value[0].id
                        }
                    }
                })
            }
        }, 300)
    // console.log(tabtable.value, "实时的tab数据内容");
    }
}

const styleList = ref([
    {
        index: 1,
        url: 'https://public-obs-cdn.anjulian.com.cn/2025-04-24/c2dd500a-c61f-4289-af40-2afe8f74e8e4.png',
    },
    {
        index: 2,
        url: 'https://public-obs-cdn.anjulian.com.cn/2025-04-24/9e07ff89-fce3-4c60-a72f-9c2e9c80272f.png',
    },
    {
        index: 3,
        url: 'https://public-obs-cdn.anjulian.com.cn/2025-04-24/40cc9d3d-6edf-401a-8733-24d6431421e5.png',
    },
    {
        index: 4,
        url: 'https://public-obs-cdn.anjulian.com.cn/2025-04-24/b270ba4d-336a-4e13-ab74-35ca1fb9559f.png',
    },
    {
        index: 5,
        url: 'https://public-obs-cdn.anjulian.com.cn/2025-04-24/10ae5516-dfee-468e-9065-a0db5b8c8a3a.png',
    },
    {
        index: 6,
        url: 'https://public-obs-cdn.anjulian.com.cn/2025-04-24/3ad299a5-7782-407f-87da-41fb01809a02.png',
    },
])
const form = reactive({
    id: '',
    activityId: '',
    eventId: '',
    eventName: '',
    activeTime: [],
    remark: '1、此秒杀活动对象仅限认购项目指定楼栋及楼层 部分房源: 2、最终解释权归开发商所有。',
    startTime: '',
    endTime: '',
    description: '',
    backgroundImage: 'https://public-obs-cdn.anjulian.com.cn/2025-04-24/c6665d5f-a4a6-4bf2-a9c4-4358de9a70f2.png',
    backgroundImage1: 'https://public-obs-cdn.anjulian.com.cn/2025-04-23/b45d23d3-18b8-4753-b129-a036f839768e.jpg',
    styleImage: 'https://public-obs-cdn.anjulian.com.cn/2025-04-24/1729ea1c-e242-4ca2-8897-1c5a8562a7f0.png',
    styleType: 1,
    depositAmount: 10000.00,
    refundHour: 24,
    payTimeoutMinute: 5,
    contractJson: '',
    houseDataList: [],
    deleteHouseDataIds: [],
})

const formRef = ref(null)
function saveRow() {
    if (formRef.value) {
        formRef.value.validate((valid) => {
            if (valid) {
                let exitHouseEmpty = false
                if (form.houseDataList.length > 0) {
                    form.houseDataList.forEach((item) => {
                        if (!item.onePrice) {
                            exitHouseEmpty = true
                        }
                    })
                }
                else {
                    ElMessage.warning('请选择房源')
                    return false
                }

                if (exitHouseEmpty) {
                    ElMessage.warning('房源一口价必填,且大于0')
                    return false
                }

                if (deleteHouseProjectIds.value.length > 0) {
                    deleteHouseProjectIds.value = uniqBy(deleteHouseProjectIds.value, 'projectBaseId')
                }

                contractPersonList.value = uniqBy(contractPersonList.value, 'projectBaseId')

                const params = {
                    id: form.id,
                    activityId: form.activityId,
                    eventName: form.eventName,
                    startTime: form.activeTime[0],
                    endTime: form.activeTime[1],
                    description: form.description,
                    backgroundImage: form.backgroundImage,
                    styleImage: form.styleImage,
                    styleType: form.styleType,
                    payTimeoutMinute: form.payTimeoutMinute,
                    refundHour: form.refundHour,
                    depositAmount: form.depositAmount,
                    contactJson: JSON.stringify(contractPersonList.value),
                    houseDataList: form.houseDataList,
                    remark: form.remark,
                    deleteHouseDataIds: form.deleteHouseDataIds,
                }

                if (form.id) {
                    updateActivityEvent(params).then((res) => {
                        if (res.code == '200') {
                            router.replace('/marketing-promotion/seckill-manage/seckill-active/seckill-active-list')
                        }
                        else {
                            ElMessage.warning(res.msg)
                            return false
                        }
                    })
                }
                else {
                    addActivityEvent(params).then((res) => {
                        if (res.code == '200') {
                            router.replace('/marketing-promotion/seckill-manage/seckill-active/seckill-active-list')
                        }
                        else {
                            ElMessage.warning(res.msg)
                            return false
                        }
                    })
                }
            }
        })
    }
}

function backPage() {
    router.replace('/marketing-promotion/seckill-manage/seckill-active/seckill-active-list')
}

const houseSelectList = ref([])
function houseSelectAll(val) {
    houseSelectList.value = val
}

function houseSelectChange(val) {
    houseSelectList.value = val
}

const houseTable = ref(null)
function removeChoseHouse() {
    ElMessageBox.confirm(
        `是否批量删除选中房源`,
        '系统提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
        },
    ).then(() => {
        const deleteIds = []
        houseSelectList.value.forEach((row, index) => {
            form.deleteHouseDataIds.push(row.id)
            deleteIds.push(row.houseId)
        })

        saveHouseProjectIds.value = []
        const itemList = []
        form.houseDataList.forEach((it) => {
            if (!deleteIds.includes(it.houseId)) {
                itemList.push(it)
            }
        })

        form.houseDataList = itemList
        form.houseDataList.forEach((it) => {
            saveHouseProjectIds.value.push(it.projectBaseId)
        })
        saveHouseProjectIds.value = uniq(saveHouseProjectIds.value)
        if (contractPersonList.value) {
            contractPersonList.value = contractPersonList.value.filter((personItem) => {
                return saveHouseProjectIds.value.includes(personItem.projectBaseId)
            })
        }
        /* if (houseTable.value) {
            houseTable.value?.clearSelection()
        } */
        houseSelectList.value = []
    })
}
</script>

<template>
    <div>
        <el-card>
            <el-form ref="formRef"
                     :model="form"
                     :rules="rules"
                     label-width="140px"
            >
                <el-row class="line-title">
                    基本信息
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="活动名称"
                                      prop="eventName"
                        >
                            <el-input v-model="form.eventName"
                                      show-word-limit
                                      maxlength="20"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="活动描述"
                                      prop="remark"
                        >
                            <el-input v-model="form.remark"
                                      type="textarea"
                                      show-word-limit
                                      maxlength="50"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="活动时间"
                                      prop="activeTime"
                        >
                            <el-date-picker v-model="form.activeTime"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始时间"
                                            end-placeholder="结束时间"
                                            clearable
                                            value-format="YYYY-MM-DD HH:mm:ss"
                                            placeholder="选择活动时间"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8" />

                    <el-col :span="24">
                        <el-form-item label="活动说明"
                                      prop="description"
                        >
                            <el-input v-model="form.description"
                                      type="textarea"
                                      maxlength="1000"
                                      show-word-limit
                                      :autosize="{ minRows: 4, maxRows: 6 }"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="line-title">
                    页面配置
                </el-row>

                <el-row>
                    <el-col :span="16">
                        <el-form-item label="背景图片"
                                      prop="backgroundImage"
                        >
                            <FlUpload :key="new Date().getTime()"
                                      v-model="form.backgroundImage"
                            />
                        </el-form-item>

                        <el-form-item label="样式列表"
                                      prop="styleType"
                        >
                            <el-row style="margin-bottom:20px">
                                <el-radio-group v-for="(item, index) in styleList"
                                                :key="index"
                                                v-model="form.styleType"
                                >
                                    <el-radio :label="item.index"
                                              style="margin-right:20px;"
                                              @change="changeStyle"
                                    >
                                        样式{{ index + 1 }}
                                    </el-radio>
                                </el-radio-group>
                            </el-row>

                            <el-row style="margin-bottom:20px">
                                <el-col v-for="(item, index) in styleList"
                                        :key="index"
                                        :span="8"
                                        style="margin-bottom:20px"
                                >
                                    <FlUpload v-model="item.url"
                                              :disabled="true"
                                    />

                                    <div style="width:150px;text-align: center;font-size:13px">
                                        样式{{ index + 1 }}
                                    </div>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <h4 style="text-align: center;">
                            活动页样式预览
                        </h4>

                        <div class="big-style-box"
                             style="width:375px;height:724px;border:1px solid #ddd;margin-top:-60px;background-size: cover;transform: scale(0.8);"
                             :style="{ backgroundImage: `url(${form.backgroundImage})` }"
                        >
                            <div class="small-style-box"
                                 style="width:375px;height:480px;border:1px solid #ddd;background-size: cover;margin-top:140px;"
                                 :style="{ backgroundImage: `url(${form.styleImage})` }"
                            />
                        </div>
                    </el-col>
                </el-row>

                <el-row style="margin-top:20px"
                        class="line-title"
                >
                    活动房源
                </el-row>

                <el-row style="margin-top:20px"
                        class="line-title"
                >
                    <el-button type="primary"
                               @click="showChoseHouse"
                    >
                        选择房源
                    </el-button>

                    <el-button :disabled="houseSelectList.length == 0"
                               type="primary"
                               @click="removeChoseHouse"
                    >
                        批量删除
                    </el-button>
                </el-row>

                <div style="max-height: 400px;overflow: auto;">
                    <el-auto-resizer>
                        <el-table ref="houseTable"
                                  :data="form.houseDataList"
                                  @select-all="houseSelectAll"
                                  @selection-change="houseSelectChange"
                        >
                            <el-table-column type="selection"
                                             width="55"
                            />

                            <el-table-column prop="buildingName"
                                             label="楼盘名称"
                                             width="180"
                            />

                            <el-table-column prop="roomNo"
                                             label="房号"
                                             width="180"
                            />

                            <el-table-column prop="unitNo"
                                             label="单元"
                                             width="180"
                            />

                            <el-table-column prop="buildingNo"
                                             label="楼栋"
                                             width="180"
                            />

                            <el-table-column prop="floorNo"
                                             label="楼层"
                                             width="180"
                            />

                            <el-table-column prop="houseType"
                                             label="户型"
                                             width="180"
                            >
                                <template #default="scope">
                                    <el-input v-model="scope.row.houseType"
                                              maxlength="20"
                                              placeholder="请输入户型"
                                    />
                                </template>
                            </el-table-column>

                            <el-table-column prop="area"
                                             label="面积（m2)"
                                             width="180"
                            />

                            <el-table-column prop="price"
                                             label="售价（元）"
                                             width="180"
                            >
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.price"
                                                     min="0"
                                                     :precision="2"
                                                     :controls="false"
                                                     max="999999999"
                                                     placeholder="请输入"
                                    />
                                </template>
                            </el-table-column>

                            <el-table-column prop="onePrice"
                                             label="一口价（元）"
                                             width="180"
                            >
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.onePrice"
                                                     min="0"
                                                     :precision="2"
                                                     :controls="false"
                                                     max="999999999"
                                    />
                                </template>
                            </el-table-column>

                            <el-table-column prop="sort"
                                             label="房源排序"
                                             width="180"
                            >
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.sort"
                                                     min="1"
                                                     :precision="0"
                                                     :controls="false"
                                                     max="999999999"
                                    />
                                </template>
                            </el-table-column>

                            <el-table-column prop="isShow"
                                             label="是否展示"
                                             width="150"
                            >
                                <template #default="scope">
                                    <el-switch v-model="scope.row.isShow"
                                               :active-value="0"
                                               :inactive-value="1"
                                    />
                                </template>
                            </el-table-column>

                            <el-table-column label="操作"
                                             width="180"
                            >
                                <template #default="scope">
                                    <el-button type="primary"
                                               @click="removeRow(scope.row, scope.$index)"
                                    >
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-auto-resizer>
                </div>

                <el-row style="margin-top:20px"
                        class="line-title"
                >
                    楼盘联系人
                </el-row>

                <el-table :data="contractPersonList"
                          style="margin-top:20px"
                >
                    <el-table-column prop="buildingName"
                                     label="楼盘名称"
                                     width="180"
                    />

                    <el-table-column prop="contactName"
                                     label="楼盘对接人姓名"
                                     width="180"
                    />

                    <el-table-column prop="contactPhone"
                                     label="楼盘对接人电话"
                                     width="180"
                    />

                    <el-table-column prop="consultant1Name"
                                     label="置业顾问1姓名"
                                     width="180"
                    >
                        <template #default="scope">
                            <span v-if="scope.row.consultantList.length > 0">{{ scope.row.consultantList[0].consultantName }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="consultant1Phone"
                                     label="置业顾问1电话"
                                     width="180"
                    >
                        <!----<template #default="scope">
                            <span>{{ scope.row.consultantList[0].consultantPhone }}</span>
                        </template>
                      -->
                        <template #default="scope">
                            <span v-if="scope.row.consultantList.length > 0">{{ scope.row.consultantList[0].consultantPhone }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="consultant2Name"
                                     label="置业顾问2姓名"
                                     width="180"
                    >
                        <template #default="scope">
                            <span v-if="scope.row.consultantList.length > 1">{{ scope.row.consultantList[1].consultantName }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="consultant2Phone"
                                     label="置业顾问2电话"
                                     width="180"
                    >
                        <template #default="scope">
                            <span v-if="scope.row.consultantList.length > 1">{{ scope.row.consultantList[1].consultantPhone }}</span>
                        </template>
                    </el-table-column>
                </el-table>

                <el-row style="margin-top:20px"
                        class="line-title"
                >
                    其他配置
                </el-row>

                <el-col :span="16">
                    <el-form-item label="秒杀资格金退款"
                                  prop="refundHour"
                                  label-width="180"
                    >
                        <el-input v-model="form.refundHour"
                                  :disabled="true"
                                  style="width:200px"
                        />(小时后自动退款)
                    </el-form-item>
                </el-col>

                <el-col :span="16">
                    <el-form-item label="秒杀资格金支付倒计时"
                                  label-width="180"
                                  prop="payTimeoutMinute"
                    >
                        <el-input-number v-model="form.payTimeoutMinute"
                                         style="width:200px"
                                         :min="5"
                                         :max="120"
                                         :controls="false"
                        />(分钟)
                    </el-form-item>
                </el-col>

                <el-col :span="16">
                    <el-form-item label="秒杀资格金"
                                  prop="depositAmount"
                                  label-width="180"
                    >
                        <el-input-number v-model="form.depositAmount"
                                         style="width:200px"
                                         :min="0"
                                         :precision="2"
                                         :controls="false"
                                         :max="9999999"
                        />(元)
                    </el-form-item>
                </el-col>
            </el-form>

            <el-row style="margin-top:60px;display: flex;justify-content: center;">
                <el-button type="primary"
                           style="margin-right:40px"
                           @click="saveRow()"
                >
                    保存
                </el-button>

                <el-button @click="backPage()">
                    取消
                </el-button>
            </el-row>
        </el-card>

        <el-dialog v-if="choseHouseDialog"
                   v-model="choseHouseDialog"
                   width="100%"
                   class="house-table"
                   style="height:calc(100vh - 8px );overflow: auto;"
                   destroy-on-close
                   @before-close="handleHouseClose"
                   @close="handleHouseClose"
        >
            <template #header>
                <div class="dialogheader">
                    选择房源
                    <el-row style="margin-top:20px">
                        <el-col :span="12">
                            <el-form :mode="houseForm">
                                <el-form-item>
                                    <el-select v-model="houseForm.projectId"
                                               placeholder="请选择楼盘"
                                               clearable
                                               filterable
                                               @change="changeProject"
                                    >
                                        <el-option v-for="item in projectList"
                                                   :key="item.value"
                                                   :value="item.id"
                                                   :label="item.ghxmmc"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </div>
            </template>

            <div class="house-table-box"
                 style="margin:20px 0;margin-top:40px"
            >
                <el-scrollbar height="calc(76vh)">
                    <el-tree style="
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin-right: 12px;"
                             class="tree"
                             :data="treeData"
                             node-key="id"
                             :default-checked-keys="defalutTree"

                             :props="defaultProps"
                             show-checkbox
                             default-expand-all
                             @check-change="treeclickchange"
                    >
                        <template #default="{ node, data }">
                            <el-tooltip class="item"
                                        effect="dark"
                                        :content="node.label"
                                        placement="top-start"
                            >
                                <p style="
                    width: 100px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                                >
                                    {{ node.label }}
                                </p>
                            </el-tooltip>
                        </template>
                    </el-tree>
                </el-scrollbar>

                <div class="rightval"
                     style="padding: 20px"
                >
                    <div class="iconbox">
                        <el-tooltip class="item"
                                    effect="dark"
                                    content="表示该房源尚未编辑完成，请先到房源管理菜单编辑房源户型和价格"
                                    placement="top-start"
                        >
                            <div class="boxall">
                                <div style="
                    cursor: pointer;
                    background: rgba(205, 129, 101, 1);
                    border: 1px solid rgb(179, 179, 179);
                    width: 16px;
                    height: 16px;
                    margin-left: 20px;
                  "
                                />

                                <p>房源信息未完善</p>
                            </div>
                        </el-tooltip>

                        <el-tooltip class="item"
                                    effect="dark"
                                    content="表示该房源已编辑完成，可以上架"
                                    placement="top-start"
                        >
                            <div class="boxall">
                                <div style="
                    cursor: pointer;
                    border: 1px solid rgb(179, 179, 179);
                    width: 16px;
                    height: 16px;
                    margin-left: 20px;
                  "
                                />

                                <p>待上架</p>
                            </div>
                        </el-tooltip>

                        <el-tooltip class="item"
                                    effect="dark"
                                    content="表示该房源尚未取得预售许可证，不可上架"
                                    placement="top-start"
                        >
                            <div class="boxall">
                                <div style="
                    cursor: pointer;
                    background: rgba(117, 176, 227, 1);
                    border: 1px solid rgb(179, 179, 179);
                    width: 16px;
                    height: 16px;
                    margin-left: 20px;
                  "
                                />

                                <p>无预售许可证</p>
                            </div>
                        </el-tooltip>

                        <el-tooltip class="item"
                                    effect="dark"
                                    content=" 表示该房源已上架销售，可在房源管理菜单中二次编辑部分信息，可在批次管理中编辑价格"
                                    placement="top-start"
                        >
                            <div class="boxall">
                                <div style="
                    cursor: pointer;
                    background: rgba(131, 206, 138, 1);
                    border: 1px solid rgb(179, 179, 179);
                    width: 16px;
                    height: 16px;
                    margin-left: 20px;
                  "
                                />

                                <p>待售</p>
                            </div>
                        </el-tooltip>

                        <el-tooltip class="item"
                                    effect="dark"
                                    content="表示该房屋已被用户下单并支付诚意金，不可上架"
                                    placement="top-start"
                        >
                            <div class="boxall">
                                <div style="
                    cursor: pointer;
                    background: rgba(235, 141, 36, 1);
                    border: 1px solid rgb(179, 179, 179);
                    width: 16px;
                    height: 16px;
                    margin-left: 20px;
                  "
                                />

                                <p>已认购</p>
                            </div>
                        </el-tooltip>

                        <el-tooltip class="item"
                                    effect="dark"
                                    content="表示该房屋已完成线上签约，不可上架"
                                    placement="top-start"
                        >
                            <div class="boxall">
                                <div style="
                    cursor: pointer;
                    background: rgba(241, 204, 26, 1);
                    border: 1px solid rgb(179, 179, 179);
                    width: 16px;
                    height: 16px;
                    margin-left: 20px;
                  "
                                />

                                <p>已售</p>
                            </div>
                        </el-tooltip>

                        <el-tooltip class="item"
                                    effect="dark"
                                    content="表示该房屋已完成线上签约，不可上架"
                                    placement="top-start"
                        >
                            <div class="boxall">
                                <div style="
                    cursor: pointer;
                    background: rgba(189, 189, 194, 1);
                    border: 1px solid rgb(179, 179, 179);
                    width: 16px;
                    height: 16px;
                    margin-left: 20px;
                  "
                                />

                                <p>已查封</p>
                            </div>
                        </el-tooltip>
                    </div>

                    <div class="info">
                        当前已选择{{ houseNum }} 户
                    </div>

                    <el-tabs v-model="tableActive"
                             class="demo-tabs"
                             @tab-click="handleClick"
                    >
                        <el-tab-pane v-for="(item, index) in tabTable"
                                     :key="item.id"
                                     :label="item.pName + item.label"
                                     :name="item.id"
                        >
                            <Table ref="publishList"
                                   :treefirid="treefirid"
                            />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>

            <!-- <bjfyVue :id="treeid"
                     ref="choseHouseTree"
                     :xmdjh="xmdjh"
                     @fathervisiblefooetr="fathervisibleFooetrChange"
            /> -->

            <template #footer>
                <div v-show="choseHouseFooter"
                     style="margin-top: 12px"
                >
                    <el-button @click="handleHouseClose">
                        取消
                    </el-button>

                    <el-button type="primary"
                               @click="publishHouseInfo"
                    >
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
  .line-title {
    font-size: 15px;
}

:deep(.el-dialog.house-table) {
    margin-top: 0px !important;
}

.house-table-box {
    display: flex;
}

.iconbox {
    display: flex;
    align-items: center;
    height: 30px;
}

.iconbox .boxall {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.info {
    background: #ebf5ff;
    border: 1px solid #1890ff;
    line-height: 36px;
    border-radius: 4px;
    padding-left: 16px;
    color: #1890ff;
    font-weight: 400;
    margin: 12px 0 0;
}
</style>
